<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>Column Layout</title>
	<link rel="stylesheet" type="text/css" href="js/ext-all.css" />
 	<script type="text/javascript" src="js/ext-base.js"></script>
	<script type="text/javascript" src="js/ext-all.js"></script>
	<script type="text/javascript" src="js/gridToExcel.js"></script>
    <script type="text/javascript" src="js/ext-lang-zh_CN-GBK-min.js"></script>
	<script type="text/javascript">


Ext.onReady(function(){

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    var myData = [
        ['你好',71.72,0.02,0.03,'9/1 12:00am'],
        ['我好',29.01,0.42,1.47,'9/1 12:00am'],
        ['大家好',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am']
    ];

    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    // create the data store
    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);


    var linkButton = new Ext.Button({
    text: '导出Excel',
    handler: function() {
        var vExportContent = grid.getExcelXml();
        if (Ext.isIE6 || Ext.isIE7 || Ext.isSafari || Ext.isSafari2 || Ext.isSafari3) {
            var fd=Ext.get('frmDummy');
            if (!fd) {
                fd=Ext.DomHelper.append(Ext.getBody(),{tag:'form',method:'post',id:'frmDummy',action:'exportexcel.jsp', target:'_blank',name:'frmDummy',cls:'x-hidden',cn:[
                    {tag:'input',name:'exportContent',id:'exportContent',type:'hidden'}
                ]},true);
            }
            fd.child('#exportContent').set({value:vExportContent});
            fd.dom.submit();
        } else {
            document.location = 'data:application/vnd.ms-excel;base64,'+Base64.encode(vExportContent);
        }}
});



    // create the Grid
    var grid = new Ext.grid.GridPanel({
        id: 'static-grid',
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:350,
        width:600,
        title:'Array Grid',
        bbar: new Ext.Toolbar({
            buttons: [linkButton]
        })
    });

    grid.render('grid-example');
    grid.getSelectionModel().selectFirstRow();
   
   
   
});
</script>
</head>
<body>
<div id="grid-example"></div>
</body>
</html>